<template>
  <div>
    <!-- 操作选项 -->
    <el-row :gutter="20">
      <el-col :span="4">
          <el-input
          v-model="searchText"
          @keyup.enter.native="loadGoods(1)"
          placeholder="请输入内容">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" round @click="$router.push('/toadd')">添加商品</el-button>
      </el-col>
    </el-row>
    <!-- 数据列表 -->
    <el-table
      :data="goods"
      border
      stripe
      style="width: 100%">
      <el-table-column :index="indexMethod" type="index" label="编号" width="50px"></el-table-column>
      <el-table-column
        prop="goods_name"
        label="商品名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="goods_price"
        label="商品价格"
        width="180">
      </el-table-column>
      <el-table-column
        prop="goods_state"
        label="商品状态">
      </el-table-column>
      <el-table-column
        prop="goods_weight"
        label="商品重量">
      </el-table-column>
      <el-table-column
        prop="add_time"
        label="创建时间">
        <template slot-scope="scope">{{ scope.row.add_time | dateFormat }}</template>
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row)" title="编辑" type="primary" icon="el-icon-edit" circle></el-button>
          <el-button @click="handleDelete(scope.row)" title="删除" type="danger" icon="el-icon-delete" circle></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <!--
      :current-page.sync="page" 分页组件会把当前页面同步到page属性
     -->
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="20"
      :current-page.sync="page"
      @current-change="loadGoods"
      :total="goodsTotal">
    </el-pagination>
  </div>
</template>
<script>
import { getGoodsList } from '@/api/goods'
export default {
  name: 'GoodsList',
  data () {
    return {
      goods: [],
      goodsTotal: 0,
      searchText: '',
      page: 1
    }
  },
  created () {
    this.loadGoods(1)
  },
  methods: {
    async loadGoods (page = 1) {
      const { data, meta } = await getGoodsList({ pagenum: page, query: this.searchText })
      if (meta.status === 200) {
        this.goods = data.goods
        this.goodsTotal = data.total
      }
    },
    handleEdit () {},
    handleDelete () {},
    indexMethod (index) {
      return (this.page - 1) * 20 + index + 1
    }
  }
}
</script>
<style scoped>
</style>
